<template>
  <div class="bottom_bar">
    <!-- 全选按钮 -->
    <div class="cart_checkout">
      <div class="checkout_all">
        <div class="all_checkout">
          <input type="checkbox" value="5" id="check_all" />
          <label for="check_all"></label>
        </div>
        <div class="all_title">
          <span class="all_count">全选(0)</span>
          <span class="all_price">￥0.00</span>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="cart_settle">
      <div class="settle_button">
        <button type="button" class="btn btn-default">去结算</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.bottom_bar {
  position: fixed;
  // margin-top:100px;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0px;
  z-index: 99;
  background-color: #ffffff;
  border-top: 1px solid #dedede;
  text-align: center;
  color: #000;
  .cart_checkout {
    width: 60%;
    height: 100%;
    // border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    .checkout_all {
      width: 90%;
      height: 90%;
      //   border: 1px solid red;
      text-align: left;
      display: flex;
      align-items: center;
      .all_checkout {
        width: 50px;
        height: 50px;
        // border:1px solid red;
        // background:url('../../public/checkbox.png');
        position: relative;
        overflow: hidden;
        // display: flex;
        // align-items: center;
        img {
          width: 100%;
          position: absolute;
          left: 0px;
          transform: translateY(-62px);
        }
      }
      .all_checkout input[type="checkbox"] {
        display: none;
      }
      .all_checkout label {
        display: inline-block;
        width: 60px;
        height: 60px;
        /* border: 1px solid black; */
        cursor: pointer;
        background-image: url("../../public/checkbox.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position-y: -62px;
      }
      .all_checkout input[type="checkbox"]:checked + label {
        background-position-y: 0px;
      }
      .all_title {
        margin-left: 10px;
        .all_price {
          margin-left: 30px;
          color: #f34b70;
        }
      }
    }
  }
  .cart_settle {
    width: 40%;
    height: 100%;
    // border: 1px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    .settle_button {
      width: 80%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn-default {
        background-color: #f34b70;
        border: none;
        color: #ffffff;
      }
      //   .btn-block{
      //       height: 80px;
      //     //   line-height: 70px;
      //   }
    }
  }
}
</style>